<template>
  <!-- 轮播配置页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" size="small" @click="showDialog=true;dialogBtn='增加'">新增</el-button>
      <el-button type="primary" size="small" @click="preview">预览</el-button>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <el-table :data="tableData" size='small' style="width:100%;height=10px">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="轮播图名称" align="center"></el-table-column>
        <el-table-column prop="introduce" label="轮播图描述" align="center"></el-table-column>
        <el-table-column prop="url" label="轮播图图片" align="center" >
          <template slot-scope="scope">
            <div>
              <el-popover
                placement="right"
                width="200"
                trigger="hover"
                >
                <div style="">
                  <img :src="scope.row.url" style="width: 100%; height: 100%" />
                </div>
                <el-image slot="reference" style="height:30px;width:30px" :src="scope.row.url" fit="contain" :preview-src-list='[scope.row.url]'></el-image>
              </el-popover>
              
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div>
              <el-tag type="danger" v-if="scope.row.status == '停用'" size="small"  effect="dark">停用</el-tag>
              <el-tag type="success" v-else-if="scope.row.status == '正常'" size="small"  effect="dark" >正常</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
              <el-button type="text"  size="small" @click="editBanner(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteBanner(scope.row.id)">删除</el-button>
              <el-button type="text" size="small" v-if="scope.row.status == '停用'" @click="start(scope.row)">启用</el-button>
              <el-button type="text" size="small" v-else @click="stop(scope.row)">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表单模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      @close="dialogClose"
      >
      <span>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" >
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          
          <el-form-item label="轮播图片" prop="url">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload">
              <img v-if="imageUrl" :src="form.url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="introduce">
            <el-input v-model="form.introduce"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <!-- 提交表单后 调用重置表单 -->
        <el-button type="primary" @click="submitForm">{{dialogBtn}}</el-button>
      </span>
    </el-dialog>
    <!-- 图片预览模态框 -->
    <el-dialog
      title="大屏预览"
      :visible.sync="previewDialog"
      width="50%"
      >
      <div class="block">
        <el-carousel height="300px">
          <el-carousel-item v-for="img in imgList" :key="img.id">
            <img :src="img.url" alt="" style="height:100%;width:100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <span slot="footer">
        <el-button @click="previewDialog = false" type="primary" size="small">关闭</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
import { get, post } from "../../utils/request";
//引入文件上传路径 和 文件预览路径
import {showFileURL,uploadFileURL} from '@/utils/config'
export default {
  data() {
    return {
      //table中的数据
      tableData:[],
      //模态框显示
      showDialog:false,
      // 模态框的标题
      dialogTitle:'',
      //图片的路径
      imageUrl:'',
      //图片上传的路径
      uploadFileURL,
      //提交的表单
      form:{},
      //表单提交按钮
      dialogBtn:'',
      //表单验证规则
      rules:{
          name:[
            {
              required:true,
              message:'请输入产品名称',
              trigger:'blur'
            }
          ],
          url:[
            {
              required:true,
              message:'请选择图片',
              trigger:'change'
            }
          ]
        },
      //预览图片列表
      imgList:[],
      //预览图片模态框的显示
      previewDialog:false
    };
  },
  computed: {},
  methods: {
    // 获取table中的数据
    async getTableData(){
      let res = await get('/carousel/findAll')
      this.tableData = res.data
    },
    //模态框关闭调用的函数
    dialogClose(){
      this.$refs['form'].resetFields()
      setTimeout(()=>{
        this.showDialog = false
      },200)
    },
    //图片上传成功后调用的函数
    handleAvatarSuccess(res, file){
      this.imageUrl = URL.createObjectURL(file.raw);
      //上传成功后 更新imgURL预览图片的路径
      this.form.url = showFileURL + res.data.id 
    },
    //上传之前要做的限制
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!');
      }
      return isLt3M;
    },
    //表单上传
    async submitForm(){
      this.$refs['form'].validate(async (valid) => {
          if (valid) {
            //发送表单验证请求，提交表单对象，给用户成功提示，刷新页面，调用关闭模态框的方法
            await post('/carousel/saveOrUpdate',this.form)
            this.$message.success('上传成功')
            this.getTableData()
            this.dialogClose()
          } else {
            console.log('上传失败');
            return false;
          }
        });
    },
    // 编辑图片
    editBanner(row){
      this.form = {...row}
      
      this.imageUrl = this.form.url
      this.showDialog = true
      this.dialogTitle = '编辑产品'
      this.dialogBtn = '提交编辑'
    },
    //删除图片
    async deleteBanner(id){
      await get('/carousel/deleteById',{id})
      this.getTableData()
    },
    //启用
    async start(row){
      this.form = {...row}
      this.form.status = "正常"
      await post('/carousel/saveOrUpdate',this.form)
      this.form = {}
      this.getTableData()
    },
    //停用
    async stop(row){
      this.form = {...row}
      this.form.status = "停用"
      await post('/carousel/saveOrUpdate',this.form)
      this.form = {}
      this.getTableData()
    },
    //预览图片
    async preview(){
        let data = {
          status:"正常"
        }
        let res = await get('/carousel/query',data)
        this.imgList = res.data
        this.previewDialog = true
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {},
};
</script>
<style scoped>
.header{
  margin-bottom:30px;
}
</style>